const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireSass = require('react-app-rewire-sass-modules');
const paths = require('react-scripts/config/paths');
const path = require('path');
const rewireEntry = require('./rewire-entry');

paths.appMobileJs = path.join(paths.appSrc, '/mobile.js');
const { rewireWebpackEntryConfig, rewireDevServerkEntryConfig } = rewireEntry({
  index: paths.appIndexJs,
  mobile: paths.appMobileJs,
});

module.exports = {
  webpack(config, env) {
    config = injectBabelPlugin(
      [ '@babel/plugin-proposal-decorators', { legacy: true } ],
      config
    );
    config = injectBabelPlugin(
      [ 'import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, "ant" ],
      config
    );
    config = injectBabelPlugin([ 'import', { libraryName: 'antd-mobile', style: 'css' }, "antd-mobile" ], config);
    config = rewireSass(config, env);
    config = rewireLess.withLoaderOptions({
      modifyVars: {
        'primary-color': '#008F8F',
        'card-actions-background': '#f5f8fa',
        'content-background-color': '#C6C6C6',
        'menu-item-active-bg': '#fff',
        'checkbox-size': '18px',
        'radio-size': '18px',
      },
      javascriptEnabled: true,
    })(config, env);
    config.resolve = {
      alias: {
        '@assets': path.resolve(__dirname, 'public/assets'),
        '@design': path.resolve(__dirname, 'src/lib/design'),
        '@service': path.resolve(__dirname, 'src/service'),
        '@i18n': path.resolve(__dirname, 'src/lib/i18n'),
        '~': path.resolve(__dirname, 'node_modules'),
      },
    };
    config = rewireWebpackEntryConfig(config, env);
    return config;
  },
  devServer: configFunction => {
    return (proxy, allowedHost) => {
      let config = configFunction(proxy, allowedHost);
      config = rewireDevServerkEntryConfig(config);
      return config;
    };
  },
};
